<template>
	<view>
		<view class="header" :style="{position:headerPosition,top:headerTop}">
			<view class="target" v-for="(target,index) in orderbyList" @tap="select(index)" :key="index"
				:class="[target.selected?'on':'']">
				{{target.text}}
				<view v-if="target.orderbyicon" class="icon" :class="target.orderbyicon[target.orderby]"></view>
			</view>
		</view>
		<!-- 占位 -->
		<view class="place"></view>
		<!-- 商品列表 -->
		<view class="goods-list">
			<view class="product-list">
				<view class="product" v-for="(goods) in goodsList" :key="goods.id" @tap="toGoods(goods)">
					<!-- <image mode="widthFix" :src="goods.logo_url |getImg"></image> -->
					<image mode="" src="/static/new/goods1.png"></image>
					<view class="name">{{goods.name}}</view>
					<view class="info">
						<view class="price">￥{{goods.price}}</view>
						<view class="slogan">售出 : {{goods.sell}}</view>
					</view>
				</view>
			</view>
			<view class="loading-text">{{loadingText}}</view>
		</view>
	</view>
</template>

<script>
	import {
		GoodsList
	} from "@/api/api.js"
	export default {
		data() {
			return {
				goodsList: [],
				loadingText: "正在加载...",
				headerTop: "0px",
				headerPosition: "fixed",
				orderbyList: [{
						text: "上新",
						selected: true,
						orderbyicon: false,
						orderby: 'default'
					},
					{
						text: "价格",
						selected: false,
						orderbyicon: ['sheng', 'jiang'],
						orderby: 0
					},
					{
						text: "销量",
						selected: false,
						orderbyicon: false,
						orderby: 'sell'
					},
				],
				search: {},
				orderby: "sheng",
				page: 1,
				flag: true
			};
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			if (option.pid != undefined) {
				this.search.parent_id = option.pid
			} else {
				this.search.son_id = option.sid
			}
			this.search.sort = 'default';
			this.search.page = this.page
			this.GoodsList(this.search)
			// #ifdef APP-PLUS
			this.headerTop = '0'
			// #endif
			// #ifdef H5
			this.headerTop = '44px'
			// #endif
			uni.setNavigationBarTitle({
				title: option.name
			})
		},

		//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
		onReachBottom() {
			if (this.flag) {
				this.page++
				this.search.page = this.page
				this.GoodsList(this.search)
			}

		},
		methods: {
			GoodsList(data) {
				this.loadingText = "正在加载...";
				GoodsList(data).then(res => {
					if (res.data.length > 0) {
						this.goodsList = this.goodsList.concat(res.data)
						this.loadingText = "上拉加载更多";
						this.flag = true
					} else {
						this.flag = false
						this.loadingText = "没有更多数据";
					}
				})
			},

			//商品跳转
			toGoods(e) {
				uni.navigateTo({
					url: '../goods1?id=' + e.id
				});
			},
			//排序类型
			select(index) {
				let tmpTis = this.orderbyList[index].text + "排序 "
				let change = this.orderbyList[index].orderby; // sell
				if (this.orderbyList[index].orderbyicon) {
					let type = this.orderbyList[index].orderby == 0 ? '升序' : '降序';
					change = this.orderbyList[index].orderby == 0 ? 'asc' : 'desc'
					if (this.orderbyList[index].selected) {
						type = this.orderbyList[index].orderby == 0 ? '降序' : '升序';
						change = this.orderbyList[index].orderby == 0 ? 'desc' : 'asc'
						this.orderbyList[index].orderby = this.orderbyList[index].orderby == 0 ? 1 : 0;
					}
					tmpTis += type
				}
				this.search.sort = change //筛选条件 更换
				this.page = 1;
				this.search.page = this.page //页码初始化
				this.orderbyList[index].selected = true;
				let len = this.orderbyList.length;
				for (let i = 0; i < len; i++) {
					if (i != index) {
						this.orderbyList[i].selected = false;
					}
				}
				this.goodsList = [];
				this.GoodsList(this.search)
				uni.showToast({
					title: tmpTis,
					icon: "none"
				});
			}
		}

	}
</script>

<style lang="scss">
	page {
		background: #0f172a;
	}

	.icon {
		font-size: 26upx;
		color: #64748B;
		margin-left: 5px;
		margin-top: 3px;
	}

	.header {
		width: 92%;
		padding: 0 4%;
		height: 79upx;
		display: flex;
		justify-content: space-around;
		align-items: flex-end;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #1E293B;

		.target {
			width: 20%;
			height: 40px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 14px;
			margin-bottom: -2upx;
			color: #64748B;

			&.on {
				color: #798AD6;
				border-bottom: 3px solid #798AD6;
				font-weight: 600;
				font-size: 15px;

				.icon {
					color: #798AD6;
				}
			}


		}
	}

	.place {
		background-color: #1E293B;
		height: 40px;
	}

	.goods-list {
		padding-top: 10px;

		.loading-text {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 60upx;
			color: #979797;
			font-size: 24upx;
		}

		.product-list {
			width: 100%;
			padding: 0 10px 3vw 10px;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			box-sizing: border-box;

			.product {
				width: 48%;
				border-radius: 20upx;
				background-color: #1E293B;
				margin: 0 0 15px 0;
				box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1);
				color: #fff;
				padding: 5px;
				box-sizing: border-box;
				box-shadow: 0 0 5px #888;

				image {
					width: 100%;
					border-radius: 20upx 20upx 0 0;
					height: 140px;
				}

				.name {
					width: 92%;
					padding: 10upx 4%;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					text-align: justify;
					overflow: hidden;
					font-size: 30upx;
					padding-bottom: 0;
				}

				.info {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					width: 92%;
					padding: 10px 4% 10px 4%;

					.price {
						font-size: 30upx;
						font-weight: 600;
					}

					.slogan {
						font-size: 24upx;
					}
				}
			}

		}
	}
</style>